<template>
  <div>
    <a-input @click="openModal" v-model="valueText" placeholder="请选择执行规则" readOnly :disabled="disabled">
    </a-input>
    <a-modal title="循环规则" :visible="visible" @ok="handleOk" @cancel="handleCancel" :width="750">
      <a-radio-group v-model="radiovalue" @change="onChange">
        <a-radio :style="radioStyle" :value="1">
          每天&#8195;
          <a-time-picker
            format="HH:mm"
            v-model="cronData1.dayHours1"
            @change="cron1HourChange1"
            :allowClear="false"
          />&#8195;每&#8195;<a-input-number
            v-model="cronData1.dayMinute"
            :min="0"
            :max="24"
            placeholder="请输入小时"
            @change="cron1MinuteChange"
          />&#8195;小时&#8195;至&#8195;<a-time-picker
            format="HH:mm"
            :allowClear="false"
            v-model="cronData1.dayHours2"
            @change="cron1HourChange2"
          />
        </a-radio>
        <a-radio :style="radioStyle" :value="2">
          每&#8195;&#8195;&#8197;<a-input-number
            v-model="cronData2.day"
            :min="0"
            :max="30"
            placeholder="请输入天"
            @change="cron2DayChange"
          />&#8195;天&#8195;<a-time-picker
            :allowClear="false"
            format="HH:mm"
            v-model="cronData2.hours"
            @change="cron2HourChange"
          />
        </a-radio>
        <a-radio :style="radioStyle" :value="3">
          每周&#8195;
          <a-select placeholder="请选择" v-model="cronData3.weark" @change="cron3WearkChange">
            <a-select-option v-for="item in wearkList" :key="item.id" :value="item.id">
              {{ item.value }}
            </a-select-option>
          </a-select>
          &#8195;&#8195;&#8197;&#8194;<a-time-picker
            :allowClear="false"
            format="HH:mm"
            v-model="cronData3.hours"
            @change="cron3HourChange"
          />
        </a-radio>
        <a-radio :style="radioStyle" :value="4">
          每&#8195;&#8195;&#8197;<a-input-number
            placeholder="请输入月"
            v-model="cronData4.month"
            :min="0"
            :max="11"
            @change="cron4MonthChange"
          />&#8195;月&#8195;<a-input-number
            placeholder="请输入日"
            v-model="cronData4.day"
            :min="0"
            :max="30"
            @change="cron4DayChange"
          />&#8195;日&#8195;<a-time-picker
            :allowClear="false"
            format="HH:mm"
            v-model="cronData4.hours"
            @change="cron4HourChange"
          />
        </a-radio>

        <a-radio :style="radioStyle" :value="5">
          每&#8195;&#8195;&#8197;<a-input-number
            placeholder="请输入年"
            v-model="cronData5.year"
            :min="0"
            :max="10"
            @change="cron5YearChange"
          />&#8195;年&#8195;<a-input-number
            placeholder="请输入月"
            v-model="cronData5.month"
            :min="0"
            :max="12"
            @change="cron5MonthChange"
          />&#8195;月&#8195;<a-input-number
            placeholder="请输入日"
            v-model="cronData5.day"
            :min="0"
            :max="30"
            @change="cron5DayChange"
          />&#8195;日&#8195;<a-time-picker
            :allowClear="false"
            format="HH:mm"
            v-model="cronData5.hours"
            @change="cron5HourChange"
          />
        </a-radio>
        <a-col style="margin-top:10px" :span="24">
          {{ 'cron表达式:  ' + mycron.cron }}
        </a-col>
        <a-col style="margin-top:10px" :span="24">
          {{ '运行规则:  ' + mycron.cronText }}
        </a-col>
      </a-radio-group>
    </a-modal>
  </div>
</template>
<script>
  import moment from 'moment'

  export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    valueText() {
      if (this.value !== '' && this.value.cronText !== '') {
        return JSON.parse(this.value).cronText
      } else {
        return ''
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      wearkList: [
        {
          id: 1,
          value: '一'
        },
        {
          id: 2,
          value: '二'
        },
        {
          id: 3,
          value: '三'
        },
        {
          id: 4,
          value: '四'
        },
        {
          id: 5,
          value: '五'
        },
        {
          id: 6,
          value: '六'
        },
        {
          id: 7,
          value: '日'
        }
      ],
      visible: false,
      cron: ['0', '*', '*', '*', '*', '*', '?'],
      mycron: {
        cron: '',
        cronText: '',
        radiovalue: ''
      },
      radiovalue: '',
      radioStyle: {
        display: 'block',
        height: '40px',
        lineHeight: '40px'
      },
      cronData1: {
        dayHours1: '',
        dayMinute: '',
        dayHours2: ''
      },
      cron1: {
        dayHours1: [],
        dayMinute: '',
        dayHours2: []
      },
      cronData2: {
        day: '',
        hours: ''
      },
      cron2: {
        day: '',
        hours: []
      },
      cronData3: {
        weark: undefined,
        hours: ''
      },
      cron3: {
        weark: '',
        hours: ''
      },
      cronData4: {
        month: '',
        day: '',
        hours: ''
      },
      cron4: {
        month: '',
        day: '',
        hours: []
      },
      cronData5: {
        year: '',
        month: '',
        day: '',
        hours: ''
      },
      cron5: {
        year: '',
        month: '',
        day: '',
        hours: ''
      }
    }
  },
  methods: {
    openModal() {
      this.visible = true
      if (this.value !== '') {
        this.mycron = JSON.parse(this.value)
        this.radiovalue = this.mycron.radiovalue
        if (this.radiovalue === 1) {
          var cron = this.mycron.cron.split(' ')
          var minute = cron[1].split('/')
          var times = cron[2].split('/')
          var hour = times[1]
          var time1 = times[0].split('-')[0] + ':' + minute[0]
          var time2 = times[0].split('-')[1] + ':' + minute[0]
          this.cronData1 = {
            dayHours1: moment(time1, 'HH:mm'),
            dayMinute: Number(hour),
            dayHours2: moment(time2, 'HH:mm')
          }
          this.cron1 = {
            dayHours1: time1.split(':'),
            dayMinute: hour,
            dayHours2: time2.split(':')
          }
        } else if (this.radiovalue === 2) {
          var cron2 = this.mycron.cron.split(' ')
          var day2 = cron2[3].split('/')[1]
          var hour2 = cron2[2] + ':' + cron2[1]
          this.cronData2 = {
            day: Number(day2),
            hours: moment(hour2, 'HH:mm')
          }
          this.cron2 = {
            day: day2,
            hours: hour2.split(':')
          }
        } else if (this.radiovalue === 3) {
          var cron3 = this.mycron.cron.split(' ')
          var weark3 = Number(cron3[5]) > 1 && Number(cron3[5]) <= 6 ? Number(cron3[5]) - 1 : 7
          var hour3 = cron3[2] + ':' + cron3[1]
          this.cronData3 = {
            weark: Number(weark3),
            hours: moment(hour3, 'HH:mm')
          }
          this.cron3 = {
            weark: weark3,
            hours: hour3.split(':')
          }
        } else if (this.radiovalue === 4) {
          var cron4 = this.mycron.cron.split(' ')
          var month4 = cron4[4].split('/')[1]
          var day4 = Number(cron4[3])
          var hour4 = cron4[2] + ':' + cron4[1]
          this.cronData4 = {
            month: month4,
            day: day4,
            hours: moment(hour4, 'HH:mm')
          }
          this.cron4 = {
            month: month4,
            day: day4,
            hours: hour4.split(':')
          }
        } else if (this.radiovalue === 5) {
          var cron5 = this.mycron.cron.split(' ')
          var year5 = cron5[6].split('/')[1]
          var month5 = Number(cron5[4])
          var day = Number(cron5[3])
          var hour5 = cron5[2] + ':' + cron5[1]
          this.cronData5 = {
            year: year5,
            month: month5,
            day: day,
            hours: moment(hour5, 'HH:mm')
          }
          this.cron5 = {
            year: year5,
            month: month5,
            day: day,
            hours: hour5.split(':')
          }
        }
      }
    },
    handleCancel(e) {
      Object.assign(this.$data, this.$options.data())
      this.visible = false
    },
    handleOk(e) {
      if (this.mycron.cronText !== '') {
        this.$emit('change', JSON.stringify(this.mycron))
      }
      //   } else {
      //     // this.$emit('change', '')
      //     this.$message.warning('请选择完整的规则')
      //   }
      Object.assign(this.$data, this.$options.data())
      this.visible = false
    },
    onChange(e) {
      this.radiovalue = e.target.value
      this.mycron.radiovalue = e.target.value
      this.mycron.cronText = ''
      this.cron = ['0', '*', '*', '*', '*', '?']
      if (this.radiovalue === 1) {
        this.cron = ['0', '*', '*', '*', '*', '?', '*']
        this.updateCron1()
      } else if (this.radiovalue === 2) {
        this.updateCron2()
      } else if (this.radiovalue === 3) {
        this.updateCron3()
      } else if (this.radiovalue === 4) {
        this.updateCron4()
      } else if (this.radiovalue === 5) {
        this.updateCron5()
      }
      this.mycron.cron = this.cron.join(' ')
    },
    cron1HourChange1(time, timeString) {
      this.cron1.dayHours1 = timeString.split(':')
      this.updateCron1()
    },
    cron1MinuteChange(e) {
      this.cron1.dayMinute = this.cronData1.dayMinute
      this.updateCron1()
    },
    cron1HourChange2(time, timeString) {
      this.cron1.dayHours2 = timeString.split(':')
      this.updateCron1()
    },
    updateCron1() {
      if (this.cron1.dayMinute !== '' && this.cron1.dayHours1.length !== 0 && this.cron1.dayHours2.length !== 0) {
        this.cron[1] = parseInt(this.cron1.dayHours1[1]) + '/0'
        this.cron[2] = this.cron1.dayHours1[0] + '-' + this.cron1.dayHours2[0] + '/' + this.cron1.dayMinute
        this.mycron.cron = this.cron.join(' ')
        this.mycron.cronText =
          '每天' +
          this.cron1.dayHours1.join(':') +
          '至' +
          this.cron1.dayHours2.join(':') +
          ',间隔' +
          this.cron1.dayMinute +
          '小时运行一次'
      }
    },
    cron2DayChange() {
      this.cron2.day = this.cronData2.day
      this.updateCron2()
    },
    cron2HourChange(time, timeString) {
      this.cron2.hours = timeString.split(':')
      this.updateCron2()
    },
    updateCron2() {
      if (this.cron2.day !== '' && this.cron2.hours.length !== 0) {
        this.cron[1] = parseInt(this.cron2.hours[1]) + ''
        this.cron[2] = parseInt(this.cron2.hours[0]) + ''
        this.cron[3] = '1/' + this.cron2.day
        this.mycron.cron = this.cron.join(' ')
        this.mycron.cronText = '每' + this.cron2.day + '天,' + '在' + this.cron2.hours.join(':') + '运行一次'
      }
    },
    cron3WearkChange() {
      this.cron3.weark = this.cronData3.weark
      this.updateCron3()
    },
    cron3HourChange(time, timeString) {
      this.cron3.hours = timeString.split(':')
      this.updateCron3()
    },
    updateCron3() {
      if (this.cron3.weark !== '' && this.cron3.hours.length !== 0) {
        this.cron[1] = parseInt(this.cron3.hours[1]) + ''
        this.cron[2] = parseInt(this.cron3.hours[0]) + ''
        this.cron[3] = '?'
        this.cron[5] = this.cron3.weark > 1 && this.cron3.weark <= 6 ? this.cron3.weark + 1 + '' : '1'
        this.mycron.cron = this.cron.join(' ')
        this.mycron.cronText =
          '每周' + this.wearkList[this.cron3.weark - 1].value + ',在' + this.cron3.hours.join(':') + '运行一次'
      }
    },
    cron4MonthChange() {
      this.cron4.month = this.cronData4.month
      this.updateCron4()
    },
    cron4DayChange() {
      this.cron4.day = this.cronData4.day
      this.updateCron4()
    },
    cron4HourChange(time, timeString) {
      this.cron4.hours = timeString.split(':')
      this.updateCron4()
    },
    updateCron4() {
      if (this.cron4.month !== '' && this.cron4.day !== '' && this.cron4.hours.length !== 0) {
        this.cron[1] = parseInt(this.cron4.hours[1]) + ''
        this.cron[2] = parseInt(this.cron4.hours[0]) + ''
        this.cron[3] = this.cron4.day
        this.cron[4] = '1/' + this.cron4.month
        this.mycron.cron = this.cron.join(' ')
        this.mycron.cronText =
          '每' + this.cron4.month + '个月,' + '在' + this.cron4.day + '号' + this.cron4.hours.join(':') + '运行一次'
      }
    },
    cron5YearChange() {
      this.cron5.year = this.cronData5.year
      this.updateCron5()
    },
    cron5MonthChange() {
      this.cron5.month = this.cronData5.month
      this.updateCron5()
    },
    cron5DayChange() {
      this.cron5.day = this.cronData5.day
      this.updateCron5()
    },
    cron5HourChange(time, timeString) {
      this.cron5.hours = timeString.split(':')
      this.updateCron5()
    },
    updateCron5() {
      if (this.cron5.year !== '' && this.cron5.month !== '' && this.cron5.day !== '' && this.cron5.hours.length !== 0) {
        this.cron[1] = parseInt(this.cron5.hours[1]) + ''
        this.cron[2] = parseInt(this.cron5.hours[0]) + ''
        this.cron[3] = this.cron5.day + ''
        this.cron[4] = this.cron5.month + ''
        this.cron[5] = '?'
        var date = new Date()
        this.cron[6] = date.getFullYear() + '/' + this.cron5.year
        this.mycron.cron = this.cron.join(' ')
        this.mycron.cronText =
          '每' +
          this.cron5.year +
          '年,' +
          '在' +
          this.cron5.month +
          '月' +
          this.cron5.day +
          '日' +
          this.cron5.hours.join(':') +
          '运行一次'
      }
    }
  }
}
</script>
<style scoped>
.ant-input-number {
  width: 128px;
}
.ant-select {
  width: 128px;
}
</style>
